<template>
  <view class="set">
    <view class="set__window">
      <view class="address">
        <view class="info" @tap="handleAddress">
          <text class="title">收货地址</text>
        </view>
      </view>
      <view class="password">
        <view class="info" @tap="handleModify('phone')">
          <text class="title">更换手机号</text>
          <text class="phone">{{ phone }}</text>
        </view>
        <view class="info" @tap="handleModify('password')">
          <text class="title">修改密码</text>
        </view>
      </view>
      <view class="about-us">
        <view class="info" @tap="handleUs">
          <text class="title">关于我们</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPhone } from "../../libs/axios/modules/personal-center";

export default {
name: "index",
data() {
  return {
    phone: '' // 手机号
  }
},
created () {
  this.phoneInfo()
},
methods: {
  /* 获取手机信息 */
  phoneInfo () {
    getPhone()
      .then(({ data }) => {
        const { phone } = data
        this.phone = phone.substr(0, 3) + '****' + phone.substr(7)
      })
      .catch((e) => {
        console.log(e.message)
      })
  },
  handleModify (type) {
    console.log(type)
  },
  handleAddress () {
    console.log('收货地址')
  },
  handleUs () {
    console.log('关于我们')
    this.$taro.navigateTo({
      url: '/pages/about-us/index'
    })
  }
}
};
</script>

<style lang="scss">
.set {
  .info {
    display: flex;
    justify-content: space-between;
    padding: 32px 56px 32px 22px;
    position: relative;
    background: #FFFFFF;
    text {
      font-size: 32px;
      color: #303030;
      line-height: 44px;
    }
    .phone {
      margin-left: 32px;
      font-weight: bold;
      flex: 1;
      text-align: right;
    }
    .sign {
      font-weight: 500;
    }
    .default-sty {
      color: #dddddd;
    }
    &::after {
      content: '';
      width: 48px;
      height: 48px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: url("../../images/personal-center/head_to_page.png") no-repeat 100%/100%;
    }
  }
  &__window {
    > view {
      margin-top: 32px;
    }
  }
}
</style>
